import { PureComponent } from 'react'
import { Layout } from 'antd'
import { Content, Header } from 'antd/es/layout/layout'
import ReactDom from 'react-dom'
import ContentLogin from './content/ContentLogin'
import HeaderLogin from './header/HeaderLogin'
import basicStyle from '../login.less'

class BasicLayouts extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      height: props.height,
      width: props.width,
      headerHeight: 90
    }
  }

  componentDidMount () {
    const parentNode = ReactDom.findDOMNode(this).parentNode.parentNode
    const height = parentNode.offsetHeight
    const width = parentNode.offsetWidth
    const { headerHeight } = this.state
    const contentHeight = height - headerHeight
    this.setState({
      height,
      width,
      contentHeight
    })
  }

  render () {
    const { height, contentHeight } = this.state
    return (
      <Layout style={{ height }} className={basicStyle.antLayout}>
        <Header className={basicStyle.header}>
          <HeaderLogin/>
        </Header>
        <Content>
          <ContentLogin height={contentHeight}/>
        </Content>
      </Layout>
    )
  }
}

export default BasicLayouts